<script setup lang="ts">
import { ref } from "vue";

// 传值
const props = defineProps({
  roleIds: {
    type: Array<any>,
    default: () => []
  },
  roleList: {
    type: Array<any>,
    default: () => []
  }
});

const ruleFormRef = ref();
const form = ref({
  roleIds: props.roleIds
});

const formRules = {
  roleIds: [{ required: true, message: "请选择", trigger: "change" }]
};

function getRef() {
  return ruleFormRef.value;
}
function getFormVal() {
  return form.value;
}

defineExpose({ getRef, getFormVal });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="form"
    :rules="formRules"
    label-width="120px"
    class="mr-12"
  >
    <el-form-item label="角色" prop="roleIds">
      <el-select v-model="form.roleIds" clearable multiple placeholder="请选择">
        <el-option
          v-for="item in roleList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
  </el-form>
</template>
